<template>
<div class="xjgonggaobox">
		<div class="xjgonggaotitle"><span>公告</span></div>
		<div class="xjgonggaocontent">
			<div class="xjselectlink">
				<div v-for="(item,index) in 3" :key="index" style="margin-top:20px">
			    <div class="xjgonggao" >公告{{item}}：<input v-model="gonggao[index].text" /><el-button class="xjbutton" @click="setLink(index)" size="mini">设置链接</el-button></div>
				<el-link type="primary" class="mt-0" :href="gonggao[index].url"><span style="color:black;" v-if="gonggao[index].title">链接{{item}}：</span>{{gonggao[index].title}}</el-link>
			    </div>
			</div>
			<p class="mt-10 mb-10">
				<el-tag>公告可以设置链接板块</el-tag>
			</p>
		</div>
		<xjsetlink ref="xjsetlinkcom" v-on:childByLinkValue="childByLinkValue"></xjsetlink>
	</div>
</template>

<script>
	import xjsetlink from '@/components/shop/xjsetlink.vue';
	export default {
		props: ["gonggao"],
		components:{
			xjsetlink
		},
		data() {
			return {
				nowindex:""
			}
		},
		methods:{
			setLink(index){
                this.nowindex=index;
				this.$refs.xjsetlinkcom.dialogVisible=true;
			},
			childByLinkValue(childValue){
                this.$parent.nowitem.gonggaotext[this.nowindex].title = childValue.title;
				this.$parent.nowitem.gonggaotext[this.nowindex].url = childValue.url;
			}
		},
		created(){
		}
	}
</script>

<style lang="scss">
	//@import "@/assets/css/common.scss";
	.xjgonggaobox {
		width: 400px;
		display: flex;
		flex-direction: column;

		.xjgonggaotitle {
			width: 100%;
			height: 30px;
			background-color: $danlv;
			border: 1px solid $qianlv;

			span {
				margin-left: 10px;
				font-size: 12px;
				line-height: 30px;
				color: $shenlv;
			}
		}

		.xjgonggaocontent {
			width: 100%;
			background-color: white;
			border: 1px solid $qianlv;
			.xjselectlink {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex-wrap: nowrap;
				.xjgonggao{
					width: 350px;
					height: 30px;
					font-size: 14px;
                    margin-bottom: 0 !important;
					input{
						height: 25px;
						width: 180px;
						border:1px solid #ccc;
					}
				}
			}

			.xjbutton {
				background-color: $shenlv;
				color: white;
				margin: 0px 10px 12px;
				display: inline-block;
			}

			p {
				font-size: 12px;
				margin-left: 15px;
			}
		}

	}
</style>
